import { Tab, TabView } from "@rneui/themed";
import Colors from "../../util/Colors";
import { Dimensions, FlatList, Image, Text, View } from "react-native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import React from "react";


export default function(props){
  const [index, setIndex] = React.useState(0);


  return(
    <>
      <Tab
        value={index}
        onChange={(e) => setIndex(e)}
        indicatorStyle={{
          backgroundColor: Colors.colorLight,
          height: 3,
        }}
        containerStyle={{
          backgroundColor:'rgba(35,35,35,0)',
          height:30
        }}
        variant="primary"
      >
        <Tab.Item
          titleStyle={{ fontSize: 12 }}
          icon={<Image source={require('../../images/neteasemusic.png')} style={{width:20,height:20}}/>}
          containerStyle={{backgroundColor:'rgba(35,35,35,0)'}}
        />
        <Tab.Item
          titleStyle={{ fontSize: 12 }}
          icon={<MaterialCommunityIcons name={'qqchat'} color={'#515151'} size={15}/>}
          containerStyle={{backgroundColor:'rgba(35,35,35,0)'}}
        />
        <Tab.Item
          titleStyle={{ fontSize: 12 }}
          icon={<Image source={require('../../images/migu.png')} style={{width:20,height:20}}/>}
          containerStyle={{backgroundColor:'rgba(35,35,35,0)'}}
        />
        <Tab.Item
          titleStyle={{ fontSize: 12 }}
          icon={<Image source={require('../../images/kuwo.png')} style={{width:20,height:20}}/>}
          containerStyle={{backgroundColor:'rgba(35,35,35,0)'}}
        />
        <Tab.Item
          titleStyle={{ fontSize: 12 }}
          icon={<Image source={require('../../images/kugou.png')} style={{width:20,height:20}}/>}
          containerStyle={{backgroundColor:'rgba(35,35,35,0)'}}
        />
      </Tab>

      <TabView value={index} onChange={setIndex} animationType="spring">
        <TabView.Item style={{  width: '100%' }}>
          {props.renderNetease()}
        </TabView.Item>
        <TabView.Item style={{  width: '100%' }}>
          {props.renderQQ()}
        </TabView.Item>
        <TabView.Item style={{  width: '100%' }}>
          {props.renderMiGu()}
        </TabView.Item>
        <TabView.Item style={{  width: '100%' }}>
          {props.renderKuWo()}
        </TabView.Item>
        <TabView.Item style={{  width: '100%' }}>
          {props.renderKuGou()}
        </TabView.Item>
      </TabView>
    </>

  )
}
const {height, width} = Dimensions.get('window');
